import React, { useState, useEffect } from 'react';
import { useHistory } from "react-router-dom";
import Hello from '../components/Hello'

export default function Home(){
    const [login,setLogin] = useState(false);
    const [msg, setMsg] = useState('');
    let history = useHistory();
    useEffect(()=>{
        if(login){
            history.push("/about")
        }
    });

    // 使用Ajax需要引入axios库
    let axios = require('axios');
    let user='',pass=''; 

    const handleLogin =()=> {
        const data ={
            "user":user,
            "password":pass
        }
        // 用post方法请求后端网址
        axios.post(`https://c958fd37-19ce-4279-9844-460504d1a85e.bspapp.com/http/login`, data)
            .then(function (response) {
               // 请求成功（网络畅通）返回结果
               console.log(data)
               console.log(response.data.code)
               setLogin(response.data.code === 200)
               setMsg(response.data.msg) 
            })
    };

    

    return(
        <div>
            Home page
            {login?<h3>已登录状态(此处也可以是组件各种标签)</h3> : <h3>未登录状态</h3>}
            <Hello message={msg}></Hello>
            <input type='text' placeholder='User' onChange={e=>user=e.target.value}></input>
            <input type='password' placeholder='Password' onChange={e=>pass=e.target.value}></input>
            <button onClick={handleLogin}>Login</button>
        </div>
    )
}